<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stomp Demo Test</title>
    <link rel="stylesheet" href="css/main.css"/>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.js"></script>
    <script>
        var username = '54F05DAA-4BBD-496E-B8B0-288A8337F4B9';
        var sendMessage = null;
        var disConnect = null;

        function connect() {
            var client = Stomp.client('ws://127.0.0.1:8080/ws/websocket');
            client.heartbeat.outgoing = 5000;
            client.heartbeat.incoming = 0;

            client.connect({
                username: username
            }, function (succ) {
                console.log('client connect success:', succ);
                updateState('连接成功');

                // 订阅广播
                client.subscribe("/sub/public", onMessage);
                // 订阅消息
                client.subscribe("/user/sub/msg", onMessage);
            }, function (error) {
                console.log('client connect error:', error);
                updateState('连接失败');
            });
            sendMessage = function (destination, headers, body) {
                client.send(destination, headers, body)
            };
            disConnect = function () {
                client.disconnect();
                console.log('client connect break')
            }
        }

        function onMessage(message) {
            console.log(message);
            insertChat(false, message.destination, message.body)
        }

        function send() {
            var destination = document.getElementById("destination").value;
            var body = document.getElementById("content").value;
            if (sendMessage == null) {
                alert('ws connect break');
                return;
            }
            sendMessage(destination, {}, body);
            insertChat(true, destination, body)
        }

        function updateState(state) {
            document.getElementById("state").innerHTML = state;
        }

        function insertChat(isLeft, destination, body) {
            var p = document.createElement('p');
            if (isLeft) {
                p.setAttribute('class', 'p-left');
            } else {
                p.setAttribute('class', 'p-right');
            }
            p.innerHTML = destination + '<br/>' + body;
            document.getElementById("chat").appendChild(p);
        }

    </script>
</head>
<body>
<div class="body-left">
    <div id="state">未连接</div>
    <button id="connect" onclick="connect()">连接</button>
    <button id="disConnect" onclick="disConnect()">断开</button>
    <div>
        <input id="destination" type="text" placeholder="destination"/>
        <textarea id="content" rows="10", placeholder="payload"></textarea>
        <button id="send" onclick="send()">发送</button>
    </div>
    <div>
    </div>
</div>
<div id="chat" class="body-right">
    <p class="p-left">client message ...</p>
    <p class="p-right">server message ...</p>
</div>
</body>
</html>